{% extends 'home/public/index.html' %}


{% block title %}
<title>{{ info.title }}</title>
{% endblock %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/detail.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/detail-app.css">
{% endblock %}

{% block che %}
    {% if request.session.len.changdu  %}
        <i style="color: red" class="glyphicon glyphicon-shopping-cart"></i>
    {% else %}
        <i style="color:" class="glyphicon glyphicon-shopping-cart gouwuchese"></i>
    {% endif %}

    <span class="layout-header-service-cart-num gouwucheliang">            
        {{ request.session.len.changdu|default:0 }}
    </span>
{% endblock %}



{% block con %}
<div class="page-detail app-detail" style="margin-top: 50px">
    <div class="container" >
 
        <!-- 产品购买 -->
        <div class="row">
            <div class="col-md-5 col-sm-12 col-xs-12">
                <div class="preview">
                    <!-- Tab panes -->
                    <div class="tab-content preview-booth pt10">
                        <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
                            <img src="{{ info.pic }}" width="375" height="375" class="sImg"></div>                        
                    </div>            
                </div>
            </div>

            <div class="col-md-7 col-sm-12 col-xs-12 pt10">
                <div class="property hidden-xs hidden-sm" id="property">
                    <!-- 商品名 -->
                    <div class="property-hd">
                        <h1>{{ info.title }}</h1>
                    </div>
                    <!-- 商品价格 -->
                    <div class="property-sell">
                        <dl class="property-sell-price clearfix">
                            <dt class="vm-metatit" id="J_discountTag">价
                                <span class="s-space"></span>
                                <span class="s-space"></span>格：</dt>
                            <dd>
                                <div class="mod-price">
                                    <small>¥</small>
                                    <span id="J_price" class="vm-money">1499.00</span></div>
                                <div class="mod-original" id="J_originalPrice" style="display:none;"></div>
                                <div class="mod-activity"></div>
                                <div class="mod-countdown" id="J_discountCountDown" style="display:none;"></div>
                            </dd>
                        </dl>
                    </div>
                    <!-- 支持服务 -->
                    <div class="property-service">
                        <dl class="property-service-item clearfix">
                            <dt class="vm-metatit">
                                <span class="s-space"></span>支持：
                            </dt>
                            <dd class="mod-bd" id="J_prodService">
                                <span>
                                    <i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>花呗分期</span>
                                <span>
                                    <a href="#" target="_blank">
                                        <i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>百城速达</a>
                                </span>
                                <span>
                                    <i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>顺丰包邮</span>
                                <span>
                                    <i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>7天无理由退货</span>
                            </dd>
                        </dl>                        
                        <dl class="property-service-provider clearfix">
                            <dt class="vm-metatit">
                                <span class="s-space"></span>服务：
                            </dt>
                            <dd class="clearfix">
                                <span id="J_installmentInfo"></span>本商品由 魅族 负责发货并提供售后服务</dd>
                        </dl>
                    </div>
                    <!-- 购买数量 加入购物车-->
                    <div class="property-buy">
                        <p class="vm-message" id="J_message"></p>
                        <dl class="property-buy-quantity">
                            <dt class="vm-metatit">
                                <span class="s-space"></span>数量：
                            </dt>
                            <!-- 数量修改 -->
                            <dd class="clearfix">
                                <div class="mod-control">
                                    <a title="减少" href="javascript:;" class="vm-minus disabled">-</a>
                                    <input value="1" id="J_quantity" data-max="5" type="text">
                                    <a title="增加" href="javascript:;" class="vm-plus">+</a></div>
                            </dd>

                        </dl>
                        <div class="property-buy-action">
                            <a data-mtype="store_de_cart" href="javascript:void(0);" id="J_btnAddCart" class="btn btn-primary btn-lg " style="display:inline-block;">
                                <i></i>加入购物车                                
                            </a>
                            <a data-mtype="store_de_buy" href="{% url 'myhome_cartindex' %}" id="J_btnBuy" class="btn btn-danger btn-lg mr20">购物车</a>                            
                            <span class="vm-service" id="J_panicBuyingWrap"></span>
                        </div>
                        <p class="chenggongtishi"></p>
                    </div>             
                </div>    
            </div>
        </div>
        <!-- 产品购买 -->
    </div>
    <!-- 漂浮的导航 -->
    <div class="detail-tab anim detail-fast-float" id="detailFast">
        <div class="fixed-container">
            <ul class="clearfix">
                <li class="">
                    <a href="javascript:void(0);">商品详情</a></li>
                <li class="">
                    <a href="javascript:void(0);">规格参数</a></li>
                <li class="current">
                    <a href="javascript:void(0);">常见问题</a></li>
            </ul>
            <div class="shortcut trans">
                <div class="shortcut-con trans">
                    <div class="mod-buy">
                        <a data-mtype="store_de_buynow" href="javascript:void(0);" id="J_btnBuyShortcut" class="btn btn-primary btn-lg">
                            <i>
                            </i>现在购买</a>
                    </div>
                    <div class="mod-total trans">魅蓝 X
                        <em class="vm-price" id="J_totalPriceShortcut">￥2998.00</em>
                        <p class="vm-title" id="J_summaryName">全网通公开版 珠光白 32GB</p></div>
                </div>
            </div>
            <div class="mod-title">
            </div>
        </div>
    </div>
    <!-- 漂浮的导航 E-->
    <!-- 产品详情 -->
    <div class="row detail" id="detail">
        <div class="detail" style="height:62px;">
            <div class="detail-tab" id="detailTabFixed">
                <div class="fixed-container">
                    <ul class="clearfix" style="display: block;">
                        <li class="current">
                            <a data-mtype="store_de_xq_1" href="javascript:void(0);">商品详情</a></li>
                        <li class="">
                            <a data-mtype="store_de_xq_2" href="javascript:void(0);">规格参数</a></li>
                        <li class="">
                            <a data-mtype="store_de_xq_3" href="javascript:void(0);">常见问题</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="detail-content container">
            {{ info.info|safe }}            
        </div>
    </div>
    <!-- 产品详情 E-->
</div>
{% endblock %}



{% block script %}
<script type="text/javascript">
      //顶部导航鼠标经过出现内容
      topNav();
      //登录图片鼠标经过
      topLogin();
      //nav标签
      detaNav();
      //回顶部
      backTop();
      //移动端置顶
      appTopNav();
      //数量增加减少 
      addMin();

      // 加入购物车
      $('#J_btnAddCart').click(function(){

        // 获取当前商品id   选择数量
        var gid = {{ info.id }}
        var num = $('#J_quantity').val()

        $.get('{% url "myhome_cartadd" %}',{'gid':gid,'num':num},function(data){
            
            if(data['jieguo'] == 1){
                // console.log("进来")
                $('.gouwuchese').css({"color":"red"});

                $('.gouwucheliang').text(data['shangpinliang']);                

                $('.chenggongtishi').text("添加成功")
            }

            
        },'json')

      })


</script>
{% endblock %}








